<template>
  <z-paging
    ref="paging"
    class="container"
    use-virtual-list
    v-model="dataList"
    :auto-show-back-to-top="true"
    @query="queryList"
  >
    <view slot="top" class="paging-top">
      <!-- 头部 -->
      <u-navbar
        @click="backIndex"
        back-icon-color="#fff"
        title-color="#fff"
        title="全部收藏 "
        :background="background"
      >
      </u-navbar>
      <!-- body -->
      <view class="tabs">
        <view
          class="tab"
          :class="{ active: curTab == 'question' }"
          @click="changeTab('question')"
        >
          <text>题目(59)</text>
        </view>
        <view
          class="tab"
          :class="{ active: curTab == 'document' }"
          @click="changeTab('document')"
        >
          <text>文档(36)</text>
        </view>
      </view>
      <u-tabs :list="tabList" :current="current" @change="change"></u-tabs>
    </view>
    <view slot="cell" class="data-list" slot-scope="{ item, index }">
      <view class="item" v-if="curTab == 'question'">
        <u-tag class="tag" text="单选题" size="mini"></u-tag>
        <text class="content"
          >人脸识别通用组件已构建了( )三大核心能力，支...</text
        >
      </view>
      <view class="item document-item" v-if="curTab == 'document'">
        <u-image
          class="document-type"
          width="60rpx"
          height="60rpx"
          :src="src"
        ></u-image>
        <view class="document-content" @click="handleViewDocument(item)">
          <text class="content">这是一个文档名称</text>
          <view class="document-info">
            <text class="content">200收藏</text>
            <text class="content">2024-6-24</text>
          </view>
        </view>
        <u-button size="mini" type="primary">下载</u-button>
      </view>
    </view>
    <view slot="bottom" v-if="curTab == 'question'" class="paging-bottom">
      <u-button type="primary" size="medium" shape="circle">开始练习</u-button>
    </view>
  </z-paging>
</template>

<script>
import { getCollectAllAPI } from "@/api/addPaper/addpaper.js";
export default {
  data() {
    return {
      curTab: "question",
      background: {
        backgroundImage:
          "linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))",
      },
      current: 0,
      dataList: [],
      src: "https://files.axshare.com/gsc/EWHZSG/6d/c0/8f/6dc08fb90f184d2da4edd89f009cec71/images/%E5%85%A8%E9%83%A8%E6%94%B6%E8%97%8F_1/u3.svg?pageId=45b2332e-a280-4b46-ae7a-fa92a4f1e4d4",
    };
  },
  computed: {
    tabList() {
      return this.curTab === 'question' ? [{
        name: "全部",
      }, {
        name: "题库分类1",
      }, {
        name: "题库分类2",
      }, {
        name: "题库分类3",
      }, {
        name: "题库分类4",
      }] : [{
        name: "全部",
      }, {
        name: "文档分类1",
      }, {
        name: "文档分类2",
      }, {
        name: "文档分类3",
      }, {
        name: "文档分类4",
      }];
    },
  },
  methods: {
    backIndex() {
      uni.navigateback();
    },
    changeTab(tab) {
      this.curTab = tab;
    },
    change(index) {
      this.current = index;
    },
    queryList() {
      this.$refs.paging.complete(Array.from({ length: 15 }));
    },
    handleViewDocument(item) {
      console.log(item)
      uni.navigateTo({
        url: "/pages/documentDetail/documentDetail",
      });
    }
  },
};
</script>

<style lang="scss">
.container {
  height: 100vh;
  background-color: aliceblue;

  .tabs {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100rpx;
    background-color: #fff;
    .tab {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 50%;
      height: 100%;
      font-size: 28rpx;
      color: #666;
      &.active {
        color: #2979ff;
        font-weight: 700;
        position: relative;
        &::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 50rpx;
          height: 6rpx;
          background-color: #2979ff;
        }
      }
    }
  }
  .data-list {
    .item {
      padding: 16px 8px;
      border-bottom: 1px solid #eee;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 16px;
      .tag {
        margin-right: 6px;
        vertical-align: middle;
      }
      .content {
        vertical-align: middle;
      }
    }
    .document-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .document-content {
        flex: 1;
        padding: 0 16px;
      }
      .document-info {
        color: #666;
        display: flex;
        font-size: 14px;
        justify-content: space-between;
      }
    }
  }
  .paging-bottom {
    padding: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
